<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/bootstrap.css">
</head>
<body>
    <div id="app">
       <bt-button type='danger' size='lg'>按钮</bt-button>
       <bt-button type='success' size='xs'>按钮</bt-button>
       <bt-button type='info' size='sm'>按钮</bt-button>
       <bt-button type='warning'>按钮</bt-button>


        <btn-alert type='danger' center title='Error!' show-icon>危险内容</btn-alert>
        <btn-alert type='success' show-icon>成功内容</btn-alert>
        <btn-alert type='info' center>信息</btn-alert>
        <btn-alert type='warning' @close='fn' closeable>警告内容</btn-alert>
      <btn-alert>
         <h3 slot='title'>标题</h3>
         内容
      </btn-alert>
    </div>
    <script src="./vue.js"></script>
    <script>

    const btButton = {
        template:`
         <button class='btn'
           :class="[
               'btn-'+type,
               size ? 'btn-'+size : '',
           ]">
          <slot>{{description}}</slot>
        </button>
        
        `,
        props:{
            type:{
                type:String,
                default:'default'
            },
            size:String,
            description:String
        }
    }

     const btnAlert = {
         template:`
         <div class='alert'
              :class="[
                  'alert-'+type,
                  center ? 'text-center' : ''

              ]"
              v-if='visible'
         >
             <button
               type='button'
               class='close'
               v-if='closeable'
               @click='close'
             ><span>&times;</span></button>
             <span class="glyphicon glyphicon-cutlery text-danger" v-if="type==='danger' && showIcon"></span>
             <span class='glyphicon glyphicon-ok text-success' v-if="type==='success' && showIcon"></span>
             <slot name='title'>
               <strong v-if='title'>{{title}}</strong> 
             </slot>
             <slot>
              {{description}}             
             </slot>
         </div>
         
         `,
         data (){
             return　{
               visible: true
             }
         },
         props:{
             title:String,
             size:String,
             type:{
                 type:String,
                 default:'success'
             },
             description:String,
             center:Boolean,
             showIcon:Boolean,
             closeable:Boolean
             
         },
         methods:{
             close (){
                 this.visible = false
                 this.$emit('close')
             }
         }
     }
      Vue.component('btnAlert',btnAlert)
      Vue.component('btButton',btButton)
      const app = new Vue({
          el:'#app',
          methods:{
             fn(){
                   alert('已关闭')
              }
          }
      })
    
    </script>
</body>
</html>